<template>
  <div class="tw-px-20 tw-py-[3px] tw-my-10  chapter flex-middle border-box ">
    <div class="course-index">{{ padIndex(index) }}</div>
    <div class="tw-flex-1">
      <p class=" tw-text-[#171920] font-l "> {{ childrenItem.name }} </p>
      <div v-if="isQuestion" class="tw-text-[#666] flex-middle font-small ">
        <p class="tw-mt-10 " v-if="childrenItem.questionId">
          <span>已完成 {{ childrenItem.questionBankDoCount }} / {{ childrenItem.questionBankTotalCount }}</span>
          <span class="tw-mx-6">|</span>
          <span>正确率：{{ formatNumber(childrenItem.questionBankCorrectCount / childrenItem.questionBankDoCount*100) }}%</span>
        </p>
      </div>
      <div v-else class=" flex-middle tw-mt-10">
        <p v-if="childrenItem.videoListenStatus==0" style="vertical-align: middle;"  class="tw-w-16 tw-h-16 study-status tw-rounded-full tw-mr-8"></p>
        <p v-if="childrenItem.videoListenStatus==1" style="vertical-align: middle;" >
          <img alt="" class="tw-w-16 tw-h-16 tw-mr-8" style="vertical-align: middle;" src="@/assets/images/study/study-learning.png">
        </p>
        <p v-if="childrenItem.videoListenStatus==2" style="vertical-align: middle;"  class="tw-w-16 tw-h-16 tw-bg-[#04addb] tw-rounded-full tw-mr-8"></p>
        <p class="tw-text-[#666] flex-middle font-small  " v-if="childrenItem.type=='video'||childrenItem.type=='live'">
          <span> {{ courseBase.courseStudyType[childrenItem.type] }}</span>
          <span v-if="!isCourseTable" class="tw-mx-6">|</span>
          <p v-if="!isCourseTable">
          <span v-if="childrenItem.type=='video'">{{
              formatNumber((childrenItem.videoDuration / 60), 0)
            }}分钟</span>
            <span v-if="childrenItem.type=='live'&&childrenItem.lessonStartTime">{{ dayjs(childrenItem.lessonStartTime).format('YYYY-MM-DD HH:mm') }} 至 {{ dayjs(childrenItem.lessEndTime).format('HH:mm') }}</span>
          </p>
        </p>
        <p class="tw-text-[#666] flex-middle font-small  " v-else>
          <span> {{ courseBase.courseStudyType[childrenItem.type] }}</span>
        </p>
      </div>
    </div>
    <div v-if="courseRightBtn" class="flex-middle">
      <div v-if="childrenItem.questionId" class="flex-middle fas tw-mr-30 group click"
           @click="courseOption(1,childrenItem)">
        <p v-if="childrenItem.questionBankStudyStatus==0"
           class="tw-w-12 tw-h-12 study-status  tw-rounded-full border-box "></p>
        <el-icon v-if="childrenItem.questionBankStudyStatus==1" color="#04addb" size="12">
          <CircleCheck/>
        </el-icon>
        <span class=" font-small tw-ml-2 study-text"
              :class="childrenItem.questionBankStudyStatus==1?'tw-text-[#04addb]':'tw-text-[#666666]'">做作业</span>
      </div>
      <div v-if="childrenItem.docUrl" class="flex-middle tw-mr-30 click " @click="courseOption(2)" @mousemove="dowMouse"
           @mouseout="mouseout">
        <el-icon :color="iconShow?iconColor:'#666666'">
          <Download/>
        </el-icon>
        <span :style="{color:iconShow?iconColor:'#666666'}" class="tw-text-[#666666] font-small tw-ml-2 ">讲义</span>
      </div>
      <div class=" click " style="">
        <p v-if="childrenItem.type=='video'" class="changes-btn" @click="goStudyVideo(childrenItem)">
          <span v-if="childrenItem.videoListenStatus==0">去学习</span>
          <span v-else>继续学</span>
        </p>
        <template v-if="childrenItem.type=='live'" class="">
          <span v-if="dayjs()<dayjs(childrenItem.lessEndTime)&&dayjs()>dayjs(childrenItem.lessonStartTime)"  :class="isWithinRange?'changes-btn':'no-active-btn'" @click="goLiveVideo(childrenItem)">{{ isWithinRange?'看直播':'暂未开始' }}</span>
          <span v-if="childrenItem.videoUrl" class="changes-btn" @click="goStudyVideo(childrenItem)">看回放</span>
        </template>
        <p v-if="childrenItem.type=='question'" class="changes-btn" @click="courseOption(1,childrenItem)">
          <span>去练习</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import dayjs from "dayjs";
import {CircleCheck, Download} from '@element-plus/icons-vue'
import {courseBase} from "../../common/course-base.js";
import {useRoute, useRouter} from "vue-router";
import {computed, ref} from "vue";
import {formatNumber} from "@/utils/common.js";

const route = useRoute();
const router = useRouter();
let props = defineProps({
  childrenItem: {
    type: Object,
    default: {}
  },
  courseRightBtn: {//右侧按钮是否显示
    type: Boolean,
    default: true
  },
  isQuestion: {
    type: Boolean,
    default: false
  },
  isCourseTable: {
    type: Boolean,
    default: false
  },
  index: {
    type: Number,
    default: 0
  }
})
let emit = defineEmits(['goStudyVideo', 'goQuestion'])
const goStudyVideo = (item) => {
  emit('goStudyVideo', item)

}
let iconColor = ref('#04addb')
let iconShow = ref(false)
const dowMouse = (info) => {
  iconShow.value = true
}
const mouseout = (info) => {
  iconShow.value = false
}
const courseOption = (type, item) => {
  if (type == 1) {
    emit('goQuestion', item)
  } else {
    if (props.childrenItem.docUrl) {
      window.location.href = props.childrenItem.docUrl;
    }
  }
}
const padIndex = (index) => {
  return String(index).padStart(2, '0');
};
const goLiveVideo = (item) => {
  if(item.liveUrl){

    window.open(item.liveUrl)
  }else{

  }
}
const isWithinRange = computed(() => {
  const today = dayjs();
  const start = dayjs(props.childrenItem.lessonStartTime);
  const end = dayjs(props.childrenItem.lessEndTime);
  return today.isSameOrAfter(start) && today.isSameOrBefore(end);
});
</script>

<style lang='scss' scoped>
.chapter:hover {
  background: #e8f8fc;
}

.study-status {
  border: 1px solid #666666;
}

.changes-btn {
  width: 80px;
  height: 30px;
  border-radius: 15px;
  display: block;
  color: #fff;
  font-size: 14px;
  background: #04addb;
  line-height: 30px;
  text-align: center;
}

.changes-btn:hover {
  background: #039fc9;
}

.fas:hover .study-status {
  border: 1px solid #04addb;
}

.fas:hover .study-text {
  color: #04addb;
}

.course {
  font-size: 20px;
  margin-right: 14px;
  font-weight: 500;
  color: #c2c2c2;
  height: 100%;
  padding-top: 10px;
}

.course-index {
  width: 20px;
  font-size: 20px;
  margin-right: 12px;
  font-weight: 500;
  color: #c2c2c2;
  height: 100%;
  padding-top: 10px;
}
.no-active-btn{
  width: 80px;
  height: 30px;
  border-radius: 15px;
  display: block;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  background-color: #666666;
  color: white;
}
</style>

